<template>
  <div class="barChart">
    <div id="barChartofstatistic" class="echart"></div>
  </div>
</template>

<script>
import echarts from "@/utils/lib/echarts";
import { BarChart } from "echarts/charts";
import colorConst from "@/utils/custom-color.js";
echarts.use([BarChart]);
export default {
  name: "BarChartofsta",
  props: {
    // 图数据
    barData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    barData: {
      handler(val) {
        if (val) {
          this.getChartsdata(this.barData);
        }
      },
      deep: true,
      // immediate: true,
    },
  },
  beforeDestroy() {
    this.chartDes();
  },
  methods: {
    chartDes() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    getChartsdata(barData) {
      let xaxisData = [];
      let level1 = [];
      let level2 = [];
      let level3 = [];
      barData.map((item) => {
        xaxisData.push(item.objectName);
        item.levelList.map((it) => {
          if (it.code === 1) {
            level1.push(it.value);
          }
          if (it.code === 2) {
            level2.push(it.value);
          }
          if (it.code === 3) {
            level3.push(it.value);
          }
        });
        return item;
      });
      let option = {
        color: colorConst.customColorarr,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          data: ["一级预警", "二级预警", "三级预警"],
        },
        xAxis: [
          {
            type: "category",
            data: xaxisData,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            interval: 200,
            axisLabel: {
              formatter: "{value} 条",
            },
          },
        ],
        series: [
          {
            name: "一级预警",
            type: "bar",
            color: "#FAD42C",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: level1,
          },
          {
            name: "二级预警",
            type: "bar",
            color: "#FF871F",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: level2,
          },
          {
            name: "三级预警",
            type: "bar",
            color: "#FF0A3E",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: level3,
          },
        ],
      };
      this.initChart("barChartofstatistic", option);
    },
    initChart(id, options) {
      this.chart = echarts.init(document.getElementById(id));
      this.chart.setOption(options);
      window.addEventListener("resize", () => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.barChart {
  .echart {
    width: 100%;
    height: 280px;
  }
}
</style>
